/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import { connect } from 'react-redux';
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    TextInput,
    FlatList,
    NativeModules,
    Alert,
    ScrollView

} from 'react-native';
import ActionSheet from 'react-native-actionsheet';
var ImagePicker = NativeModules.ImageCropPicker;
import {getImgUp} from "../../network/BabyDairyApi";
import HeaderView from '../../components/JKHeader/HeaderView1.js';
import {subComment} from "../../network/UserNetApi";
import StarRating from 'react-native-star-rating';
const { width } = Dimensions.get('window');
class pingjia extends Component {
    static navigationOptions = ({ navigation }) => ({
        header:<HeaderView
            tilte='评价'
            showBack={true}
            // showRightButton={true}
            rightItemString=''
            rihghtBtnOnPress={()=>{
                navigation.goBack();
            }}
            backBtnOnPress={()=>{
                navigation.goBack();

            }} />,
    });

    constructor(props) {
        super(props);
        this.state = {
            starCount:0,
            starCount2:0,
            starCount3:0,
            text1:null,
            flag:true,
            refer:false,
            imgBase64:null,
            imgName:null,
            sou:null,
            kaiguan:true,
            img1:require('./images/haoping2.png'),
            img2:require('./images/zhongping1.png'),
            img3:require('./images/chaping1.png'),
            sty1:styles.font_Color,
            sty2:styles.font_Color_1,
            sty3:styles.font_Color_1,
            evaluate:null,


        }
        this._getImgUp=this._getImgUp.bind(this);
        this.handlePress = this.handlePress.bind(this);
        this._subComment=this._subComment.bind(this)
    };
    _getImgUp(){
        let formData = {
            imgBase64:this.state.imgBase64

        }
        getImgUp(formData,(responseData)=>{
            DebugLog(responseData['data'])
            if (responseData['code'] === '1') {
                // DebugLog(responseData);
                this.setState({
                    imgName:responseData.data
                })
            }
        });
    }
    _subComment(){
        let formData = {
            userId:this.props.uuid,
            orderId:this.props.navigation.state.params.getData['Id'],
            cont:[ [this.props.navigation.state.params.getData['orderPro'][0]['ProId'],
                    this.state.evaluate?this.state.evaluate:3,
                    this.state.text1,
                    this.state.starCount,
                    this.state.starCount2,
                    this.state.starCount3,
                    this.state.imgName]],
        }
        subComment(formData,(responseData)=>{
            if (responseData['code'] === '1') {
                 this.props.navigation.goBack()

            }else {
                // Alert.alert(responseData['msg'])
            }
        });
    }
    handlePress(i) {

        if (i === 0) {
            ImagePicker.openPicker({
                compressImageQuality:0.5,
                multiple: true,
                includeBase64:true,
            })
                .then(image => {
                    //  this._postImage(image);
                    // DebugLog("diyi",image)
                    arr=[];
                    if(image!==null){
                        for(var i=0;i<image.length;i++){
                            arr.push("data:image/png;base64,"+image[i]['data'])
                        }
                        this.setState({
                            imgBase64:arr,
                            sou:image,
                            flag:true,
                        })
                        this._getImgUp()
                    }

                })
                .catch(e => {
                    DebugLog('addBaby selectPhoto catch');
                });
        }else if (i === 1) {
            ImagePicker.openCamera({
                compressImageQuality:0.5,
                includeBase64:true,
                cropping: true,
            })
                .then(image => {
                    arr=[];
                    if(image!==null){

                        arr.push("data:image/png;base64,"+image['data']);
                        this.setState({
                            imgBase64:arr,
                            sou:image,
                            flag:false,
                            path:{uri:image['path']}
                            // path:require(image['path'])
                        });
                        this._getImgUp()
                    }
                })
                .catch(e => {
                    DebugLog('addBaby selectPhoto catch1');
                });
        }else {
            DebugLog('取消');
        }

    }
    _renderItemView = (item) => {
        if(this.state.flag){
            return (
                <View style={{flexDirection:"row"}}>
                    <Image source={{uri:item.item}} style={{width:115,height:115,marginRight:12,marginTop:10}}/>
                </View>

            )
        }else if(this.state.flag==false){
            return (
                <View style={{flexDirection:"row"}}>
                    <Image source={this.state.path} style={{width:115,height:115,marginRight:12,marginTop:10}}/>
                </View>
            )
        }
    };
    _keyExtractor = (item, index) => index;

    onStarRatingPress(rating) {
        this.setState({
            starCount: rating
        });
    }
    onStarRatingPress2(rating) {
        this.setState({
            starCount2: rating
        });
    }
    onStarRatingPress3(rating) {
        this.setState({
            starCount3: rating
        });

    }
    xing(Count,fal){
        return(
            <View styele={{width:width-28,marginLeft:14,flexDirection:"row"}}>
                <View style={{width:160,marginTop:5}}>
                    <StarRating
                        disabled={false}
                        emptyStar={'ios-star-outline'}
                        fullStar={'ios-star'}
                        halfStar={'ios-star-half'}
                        iconSet={'Ionicons'}
                        starSize={20}
                        maxStars={5}
                        rating={Count}
                        selectedStar={(rating) => fal=="一"?this.onStarRatingPress(rating):fal=="二"?this.onStarRatingPress2(rating):fal=="三"?this.onStarRatingPress3(rating):null}
                        starColor={'#FA5C5F'}
                    />
                </View>
            </View>

        )
    }
    componentWillMount(){

    };
    componentDidMount() {
         DebugLog(this.props.navigation.state.params.getData,"sssss")
    };

    render() {
        if(this.state.sou){
            var data =[];
            if (this.state.flag === false) {
                data.push(this.state.path)
            }
            else{
                for (var i=0; i<this.state.sou.length; i++) {
                    let item = this.state.sou[i];
                    data.push(item.path)
                }
            }

        }
        // var data=this.props.navigation.state.params.getData;
        return (
            <View style={styles.container}>
                <ScrollView>
                    <View style={{flexDirection:"row",marginTop:10,borderBottomWidth:1,paddingBottom:10,borderColor:"#ececec"}}>
                        <Image source={{uri:this.props.navigation.state.params.getData['orderPro'][0]['ProImg']}} style={{width:40,height:40,marginLeft:14,marginRight:20}}/>
                        <View style={{flexDirection:"row",width:width-188,justifyContent:"space-between"}}>
                            <TouchableOpacity
                                onPress={()=>{
                                    this.setState({
                                        img1:require('./images/haoping2.png'),
                                        img2:require('./images/zhongping1.png'),
                                        img3:require('./images/chaping1.png'),
                                        sty1:styles.font_Color,
                                        sty2:styles.font_Color_1,
                                        sty3:styles.font_Color_1,
                                        evaluate:3
                                    })
                                }}
                                style={{flexDirection:"row",alignItems:"center"}}
                            >
                                <Image source={this.state.img1} style={styles.image_S}/>
                                <Text style={this.state.sty1}>好评</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={()=>{
                                    this.setState({
                                        img1:require('./images/haoping1.png'),
                                        img2:require('./images/zhongping2.png'),
                                        img3:require('./images/chaping1.png'),
                                        sty1:styles.font_Color_1,
                                        sty2:styles.font_Color,
                                        sty3:styles.font_Color_1,
                                        evaluate:2
                                    })
                                }}
                                style={{flexDirection:"row",alignItems:"center"}}
                            >
                                <Image source={this.state.img2} style={styles.image_S}/>
                                <Text style={this.state.sty2}>中评</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={()=>{
                                    this.setState({
                                        img1:require('./images/haoping1.png'),
                                        img2:require('./images/zhongping1.png'),
                                        img3:require('./images/chaping2.png'),
                                        sty1:styles.font_Color_1,
                                        sty2:styles.font_Color_1,
                                        sty3:styles.font_Color,
                                        evaluate:1
                                    })
                                }}
                                style={{flexDirection:"row",alignItems:"center"}}
                            >
                                <Image source={this.state.img3} style={styles.image_S}/>
                                <Text style={this.state.sty3}>差评</Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View style={{width:width-28,marginLeft:14,}}>
                        <TextInput
                            placeholder={"宝贝满足你的期待吗？说说它的优点和美中不足的地方"}
                            style={styles.TextInput}
                            onChangeText={(text1) => this.setState({text1})}
                            value={this.state.text1}
                            keyboardType="numeric"
                            clearButtonMode="always"
                            underlineColorAndroid="transparent"
                            placeholderTextColor="#898989"
                            multiline={true}
                            autoCapitalize="none"

                        />
                        <TouchableOpacity
                            style={{flexDirection:"row",alignItems:"center"}}
                            onPress={()=>{
                                this.ActionSheet.show();
                            }}
                        >
                            <Image source={require('./images/addd.png')} style={{width:80,height:80,marginBottom:10}}/>
                        </TouchableOpacity>
                        <FlatList
                            data={data}
                            renderItem={this._renderItemView}
                            numColumns ={1}
                            onViewableItemsChanged={(info)=>{
                                DebugLog(info);
                            }}
                            horizontal = {true} //将列表横着放
                            keyExtractor={this._keyExtractor}
                            refreshing = {this.state.refer}
                            onEndReachedThreshold={-0.05}
                            onEndReached={(info) => {

                            } }
                        />
                    </View>

                    <View style={{height:10,backgroundColor:"#f6f6f6"}}></View>
                    <View style={{flexDirection:"row",alignItems:"center",marginLeft:14,marginTop:14,marginBottom:10}}>
                        <Image source={require('./images/dianpu.png')} style={{width:22,height:22}}/>
                        <Text>店铺评分</Text>
                    </View>
                    <View style={{flexDirection:"row",width:width-28,marginLeft:14,alignItems:"center"}}>
                        <Text style={{marginTop:3}}>物流服务:  </Text>
                        {this.xing(this.state.starCount,"一")}
                    </View>
                    <View style={{flexDirection:"row",width:width-28,marginLeft:14,alignItems:"center"}}>
                        <Text style={{marginTop:3}}>描述相符:  </Text>
                        {this.xing(this.state.starCount2,"二")}
                    </View>
                    <View style={{flexDirection:"row",width:width-28,marginLeft:14,alignItems:"center"}}>
                        <Text style={{marginTop:3}}>服务态度:  </Text>
                        {this.xing(this.state.starCount3,"三")}
                    </View>
                </ScrollView>

                <TouchableOpacity
                    onPress={()=>{
                        this._subComment()
                    }}
                    style={{width:width,height:50,justifyContent:"center",alignItems:"center",position:"absolute",bottom:0,backgroundColor:"#13306A"}}
                >
                    <Text style={{fontSize:20,color:"#fff"}}>提交</Text>
                </TouchableOpacity>
                <ActionSheet
                    ref={o => this.ActionSheet = o}
                    title='选择图片'
                    options={[ '从相册选择', '拍照', '取消' ]}
                    cancelButtonIndex={2}
                    destructiveButtonIndex={2}
                    onPress={this.handlePress}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:"#fff"
    },
    font_Color:{
        color:"#FE5002"
    },
    font_Color_1:{
        color:"#CACBD0"
    },
    image_S:{
        width:20,
        height:20,
        marginRight:8
    },
    TextInput:{
        width:width-30,
        height:100,
        fontSize:14
    },

});

function select(store){
    return {
        uuid:store.userInfo.user_id,
        dairyData:store.Dairy.DairyData,
    }
}

export default connect(select)(pingjia);